<template>
    <div>
        <h2>显示页面</h2>

        <a href="/add">新增页面</a><br>

        <input type="text"  v-model="cx.ename">
        <input type="text" v-model="cx.minage">-
        <input type="text" v-model="cx.maxage">
        <input type="date" v-model="cx.d1">
        <input type="date" v-model="cx.d2">
        <select v-model="cx.mid">
            <option value="0">请选择</option>
            <option v-for="a in lala" :value="a.Mid">{{ a.Mname }}</option>
        </select>
        <select v-model="cx.etype">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
        <input type="button" value="查询" @click="list">
        <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" @change="ppp" v-model="piliang">
                    </td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>性别</td>
                    <td>生日</td>
                    <td>手机号</td>
                    <td>年龄</td>
                    <td>创建日期</td>
                    <td>状态</td>
                    <td>会员名称</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" :value="a.Eid"  v-model="idlist">
                    </td>
                    <td>{{ a.Eid }}</td>
                    <td>{{ a.Ename }}</td>
                    <td>{{ a.Esex }}</td>
                    <td>{{ moment(a.Ebir).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.Ephone }}</td>
                    <td>{{ a.Eage }}</td>
                    <td>{{ moment(a.Edate).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.Etype==true?"启用":"禁用" }}</td>
                    <td>{{ a.Mname }}</td>
                    <td>
                        <img :src="'https://localhost:7072'+a.Epic" style="width: 100px; height: 100px;">
                    </td>
                    <td>
                        <input type="button" value="删除" @click="del(a.Eid)">
                        <input type="button" value="修改" @click="update(a.Eid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click=page(1)>
        <input type="button" value="上一页" @click=page(2)>
        <input type="button" :value="a" v-for="a in suan.pagecount" @click="sx(a)">
        <input type="button" value="下一页" @click=page(3)>
        <input type="button" value="尾页" @click=page(4)>
        一共{{suan.count}}条，每页显示{{cx.pagesize}}条，一共{{suan.pagecount}}页，当前第{{cx.pageindex}}页
        <input type="button" value="批量删除" @click="pl">
    </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';

const route=useRoute()
const router=useRouter()

const lala=ref([{
    "Mid": 0,
    "Mname": ""
}])

//thead
const piliang=ref(false)

//tbody
const idlist=ref([])

const sx=(val:any)=>{
    cx.value.pageindex=val
    list()
}

//全选全不选
const ppp=()=>{
    if(piliang.value)
    {
        data.value.forEach(e => {
            idlist.value.push(e.Eid)
        });
    }
    else
    {
        idlist.value=[]
    }

}

//批量删除
const pl=()=>{
    if(confirm("确认删除吗？"))
    {
        //一定ToString()
        axios.delete("https://localhost:7072/api/Emp/Ldelete",{params:{isstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0)
        {
            alert("批量删除成功");
            cx.value.pageindex=1
            list()
        }
        else
        {
            alert("批量删除失败");
        }
    })
    }
}

//分页
const page=(val:any)=>{
    if(val==1)
    {
        cx.value.pageindex=1;
        list()
    }
    if(val==2)
    {
        if(cx.value.pageindex>1)
        {
            cx.value.pageindex-=1;
            list()
        }
    }
    if(val==3)
    {
        if(cx.value.pageindex<suan.value.pagecount)
        {
            cx.value.pageindex+=1;
            list()
        }
    }
        
    if(val==4)
    {
        cx.value.pageindex=suan.value.pagecount;
        list()
    }
}

const la=()=>{
    axios.get("https://localhost:7072/api/Emp/Mlist").then(res=>{
        lala.value=res.data
    })
}

const data=ref([
    {
      "Eid": 0,
      "Ename": "",
      "Esex": 0,
      "Ebir": "2015-12-05T11:30:42.12",
      "Ephone": "",
      "Eage": 0,
      "IsDelete": false,
      "Edate": "2025-04-05T11:30:42.12",
      "Etype": true,
      "MemberLevelId": 0,
      "Epic": "/pic/c041c616-8c9d-4f12-bfd0-fbb1b3c3def02.jpg",
      "Mname": "",
      "Mid": 0
    }
])

const cx=ref({
    pageindex:1,
    pagesize:3,
    ename:"",
    maxage:0,
    minage:0,
    d1:"",
    d2:"",
    mid:0,
    etype:null
})

//重置
const cz=()=>{
    cx.value.ename="",
    cx.value.maxage=0,
    cx.value.minage=0,
    cx.value.d1="",
    cx.value.d2="",
    cx.value.mid=0,
    cx.value.etype=null
    list()
}

onMounted(() => {
    list()
    la()
})

const suan=ref({
    count:0,
    pagecount:0
})

//显示
const list=()=>{
    axios.get("https://localhost:7072/api/Emp/List",{params:cx.value}).then(res=>{
        data.value=res.data.list

        suan.value.count=res.data.count;
        suan.value.pagecount=Math.ceil(suan.value.count/cx.value.pagesize)
    })
}

//真删除
const del=(val:any)=>{
    if(confirm("确认删除吗？"))
    {
        axios.delete("https://localhost:7072/api/Emp/Delete",{params:{id:val}}).then(res=>{
            if(res.data>0)
            {
                alert("删除成功");
                list()
            }
            else
            {
                alert("删除失败");
            }
        })
    }
}

const ldel=()=>{

}

const update=(id:any)=>{
   
    router.push({path:"/update",query:{id:id}})
}

</script>

<style scoped>

</style>